<template>
	<view class="">
		<view class="nav">
			<view :class="['nav_item',nav_index == index ? 'nav_item_i':'']" 
			@tap="change(index)" 
			v-for="(item, index) in navList" 
			:key= "index">
				{{item.title}} ({{item.num}})
				<view class="line" >
				</view>
			</view>
		</view>
		<no-use v-if="!nav_index" :discountlist="discountlist"></no-use>
		<use-has  v-else-if="nav_index == 1" :discountlist="discountlist"></use-has>
		<overdue v-else :discountlist="discountlist"></overdue>
	</view>
</template>

<script>
	import useHas from '@/components/discount/use.vue'
	import noUse from '@/components/discount/nouse.vue'
	import overdue from '@/components/discount/overdue.vue'
	export default {
		components: {
			useHas,
			noUse,
			overdue
		},
		data () {
			return {
				navList:[
					{
						title: '未使用',
						num: '2'
					},
					{
						title: '已使用',
						num: '2'
					},
					{
						title: '已过期',
						num: '2'
					}
				],
				discountlist: [
					{
						price: 3,
						title: '满减优惠券',
						rule: '订单满30元使用',
						start_time: '2019.12.06',
						end_time: '2020.1.06',
						day: 4,
						flag: false
					},
					{
						price: 3,
						title: '满减优惠券',
						rule: '订单满30元使用',
						start_time: '2019.12.06',
						end_time: '2020.1.06',
						day: 4,
						flag: false
					},
					{
						price: 3,
						title: '满减优惠券',
						rule: '订单满30元使用',
						start_time: '2019.12.06',
						end_time: '2020.1.06',
						day: 4,
						flag: false
					}
				],
				nav_index:0
			}
		},
		methods: {
			change (key) {
				this.nav_index = key
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="less" scoped>
	.nav {
		width: 100%;
		height: 90upx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.nav_item {
			text-align: center;
			line-height: 90upx;
			font-size: 32upx;
			color: #333333;
			z-index: 10;
			position: relative;
			.line {
				display: none;
			}
		}
		.nav_item_i {
			color: #f73e2f;
			.line {
				display: block;
			}
		}
		.line {
			position: absolute;
			bottom:20upx;
			width: 160upx;
			height: 20upx;
			left: -6upx;
			background-color: #fdd8d5;
			border-radius: 10upx;
			z-index: -1;
		}
	}
</style>
